<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="js/jquery-1.7.2.min.js"></script>
    <script language="JavaScript" src="js/html2canvas.js"></script>
    <script language="JavaScript" src="js/lib.js"></script>
    <link rel="stylesheet" href="css/css.css">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    </head>
<body>
<div class="file">
    <textarea class="fengmian tools" rows="3" cols="20" placeholder="标题"></textarea><br>
    <input type="file" class="fl tools" id="file"><br>
    <input type="button" class="down tools" value="保存">
    <br>
    <p>数据格式：页与页之间隔两行，行与行之间隔一行，每页第一行为标题</p>
    <a href="data/shili.txt" target="_blank">示例数据</a>
</div>
    <div class="content">
        <h1 class="fubiaoti">副标题</h1>
        <h1 class="num page">1</h1>
        <h1 class="title page">这里是标题这里是标题这里是标</h1>
        <div class="ctt page">内容</div>
    </div>
<script language="JavaScript">

    var data = "";

    $(function () {

        $('.fengmian').on('keyup', function () {
            // console.log('change');
            fbt = 'fbt';
            $('.fubiaoti').show();
            $('.num').hide();
            $('.title').hide();
            $('.ctt').hide();
            $('.fubiaoti').html($(this).val());
        });

        $('#file').on('change', function () {
            // console.log($(this)[0].files[0]);
            var file = document.getElementById('file').files[0];
            var filename = file.name.split(".")[0];
            var reader = new FileReader();
            reader.onload = function() {
                // console.log(this.result);
                data = this.result;
                // console.log(data);
                formatData(data);
                bind();
                fbt= '';
            }
            reader.readAsText(file);
        });

        $('.down').bind('click', function () {
            // console.log('down');
            saveImg();
        });
    });

    function bind() {

        $('.fubiaoti').hide();
        $('.num').show();
        $('.title').show();
        $('.ctt').show();

        $('.content').bind('click', function () {
            nextPage();
        });


    }
</script>
</body>
</html>